<template>
	<view class="shop-home">
		<y-cubar title="商家主页" :bgColor="`rgba(255,255,255,${opacity})`" />
		<view class="shop-home-bg"></view>
		<view class="shop-card">
			<view class="shop-card-top">
				<view class="avatar">
					<image :src="info.avatar" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name">{{ info.merchantName }}</view>
					<view class="info-desc">
						地址：{{ info.province }}{{ info.city }}
					</view>
				</view>
				<view class="tag">{{ info.type === 'PERSON' ? '车商' : '平台自营' }} </view>
			</view>
			<view class="nums">
				<view class="num">
					<view class="val">
						<text>{{ info.productSum }}</text>
						<text class="unit">辆</text>
					</view>
					<view class="label">在租车辆</view>
				</view>
				<view class="num">
					<view class="val">
						<text>{{ info.orderSum }}</text>
					</view>
					<view class="label">累计订单</view>
				</view>
			</view>
			<view class="follow">
				<button class="cu-btn" :class="{ 'cu-btn-active': info.isConcern }" @click="follChange">
					<template v-if="info.isConcern">
						<text>已关注</text>
					</template>
					<template v-else>
						<uv-icon name="plus" bold size="25rpx" color="#333333"></uv-icon>
						<text style="padding-left: 12rpx;">关注</text>
					</template>
				</button>
			</view>
		</view>

		<view class="desc">
			<view class="nav">
				<view class="nav-hand"></view>
				<view class="title">商家简介</view>
			</view>
			<view class="con">
				{{ info.intro }}
			</view>
		</view>

		<view class="car-all">
			<view class="nav">
				<view class="nav-hand"></view>
				<view class="title">全部车辆</view>
			</view>
			<car-list :tableData="tableData" :status="status" @backInfo="backInfo" />
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onPageScroll,
		onReachBottom,
		onPullDownRefresh,
		onUnload,
	} from "@dcloudio/uni-app";
	import {
		userList
	} from '@/hooks/userList.js'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'

	import YCubar from '@/components/y-cubar/index.vue'
	import CarList from '@/components/CarList.vue'
	import {
		doDetail,
		doProductList
	} from '@/apis/shop.js'
	import {
		doAdd,
		doDel
	} from '@/apis/follow.js'

	const {
		proxy
	} = getCurrentInstance();

	const opacity = ref(0)
	onPageScroll((e) => {
		const childerOpa = Number((e.scrollTop / 200).toFixed(2))
		opacity.value = childerOpa >= 1 ? 1 : childerOpa
	})

	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo,
		getCityName: cityName
	} = storeToRefs(useStore)

	const handUser = () => {
		return new Promise((rel, rej) => {
			if (userInfo.value?.id) {
				return rel(true)
			}
			uni.navigateTo({
				url: '/pagesA/login/login'
			})
			rej('请先登录')
		})
	}


	const follChange = async () => {
		await handUser()
		if (info.value.isConcern) {
			await doDel(info.value.id)
		} else {
			await doAdd({
				merchantId: info.value.id
			})
		}
		info.value.isConcern = !info.value.isConcern
	}

	const backInfo = (e) => {
		info.value.isConcern = e.isConcern
	}

	const info = ref({})
	const init = async (id) => {
		const data = await doDetail(id)
		info.value = data
		queryForm.value.userId = data.userId
		onRefresh()
	}

	/**
	 * 
	 * 列表数据
	 * */
	const getApi = async (params) => {
		const res = await doProductList(params)
		res.records = res.records.map(el => {
			el.platform = JSON.parse(el.platform)
			return el
		})
		return res
	}
	const {
		tableData,
		status,
		fetchData,
		onBottom,
		onRefresh,
		queryForm
	} = userList({
		apis: {
			getApi
		},
		initForm: {
			isShelves: true,
			userId: ''
		}
	})

	onPullDownRefresh(() => {
		onRefresh()
	})
	onReachBottom(() => {
		onBottom()
	})

	onLoad((e) => {
		init(e.id)
	})

	onUnload(() => {
		const eventChannel = proxy.getOpenerEventChannel()
		eventChannel.emit('backInfo', info.value);
	})
</script>

<style lang="scss" scoped>
	.shop-home {
		&-bg {
			width: 750rpx;
			height: 408rpx;
			background: linear-gradient(180deg, #F7C241 0%, #FFFFFF 100%);
			position: absolute;
			top: 0;
		}

		.shop-card {
			position: relative;
			z-index: 2;
			margin: 24rpx 24rpx 0 24rpx;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			box-sizing: border-box;

			&-top {
				display: flex;
				align-items: center;
				position: relative;
				padding: 24rpx;

				.tag {
					position: absolute;
					top: 40rpx;
					right: 0;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					background: linear-gradient(180deg, #FFBE2F 0%, #FC542D 100%);
					border-radius: 30rpx 0rpx 0rpx 30rpx;
					padding: 10rpx 20rpx 10rpx 28rpx;
				}

				.avatar {
					image {
						width: 134rpx;
						height: 134rpx;
						border-radius: 50%;
					}
				}

				.info {
					margin-left: 24rpx;
					flex: 1;

					.name {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.info-desc {
						margin-top: 24rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}

			.nums {
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.num {
					width: 200rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.val {
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;

						.unit {
							font-size: 24rpx;
						}
					}

					.label {
						margin-top: 8rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.follow {
				margin-top: 56rpx;
				display: flex;
				justify-content: center;
				padding-bottom: 40rpx;

				.cu-btn {
					width: 638rpx;
					height: 92rpx;
					background: #FFC434;
					border-radius: 16rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					&-active {
						background: #F5F5F5;
						color: #999999;
					}
				}
			}
		}

		.desc {
			margin-top: 44rpx;
			padding: 0 24rpx;

			.con {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.car-all {
			margin-top: 48rpx;
			padding: 0 24rpx;
		}

		.nav {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;

			&-hand {
				width: 8rpx;
				height: 32rpx;
				background: #FFC434;
				border-radius: 4rpx;
			}

			.title {
				margin-left: 12rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>